<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>high light picture</title>
<script src="http://style.alibaba.com/js/ae.js"></script>
</head>
<body>

<style>
	* { margin:0; padding:0; }
	img { border:0; }
	#container { width:821px; margin:30px auto; position:relative; }
	#container .pro_img { position:absolute; }
	#container .pro_img img { background:url( 'http://i.ltimg.cn/letaozu/images/load/ajax-loader.gif' ) no-repeat scroll 50%; 50%; }

	#container .img1 { top:0; left:0; }
	#container .img2 { top:0; left:270px; }
	#container .img3 { top:210px; left:270px; }

	#container .img4 { top:420px; left:0; }
	#container .img5 { top:420px; left:270px; }
	#container .img6 { top:630px; left:270px; }

	#container .img7 { top:840px; left:0; }
	#container .img8 { top:840px; left:270px; }
	#container .img9 { top:1050px; left:270px; }
</style>

<div id="container">
	<a class="pro_img img1" href="/"><img src="1.jpg" width="270" height="420" /></a>
	<a class="pro_img img2" href="/"><img src="2.jpg" width="551" height="210" /></a>
	<a class="pro_img img3" href="/"><img src="3.jpg" width="551" height="210" /></a>

	<a class="pro_img img4" href="/"><img src="1.jpg" width="270" height="420" /></a>
	<a class="pro_img img5" href="/"><img src="2.jpg" width="551" height="210" /></a>
	<a class="pro_img img6" href="/"><img src="3.jpg" width="551" height="210" /></a>

	<a class="pro_img img7" href="/"><img src="1.jpg" width="270" height="420" /></a>
	<a class="pro_img img8" href="/"><img src="2.jpg" width="551" height="210" /></a>
	<a class="pro_img img9" href="/"><img src="3.jpg" width="551" height="210" /></a>
</div>

<script>

</script>

<script>
	if ( !AE.namespace( 'AE.tool.highLightPic' ) ) {
		AE.namespace( 'AE.tool.highLightPic' )
	}

	AE.tool.highLightPic = function() {
		this.config = {
			containerId: 'container'
		};
		return this;
	};

	AE.tool.highLightPic.prototype = {
		init: function( customConfig ) {
			this.config = YL.merge( this.config, customConfig || {} );		
			this._createMask();
			this._initEvent();
		},

		_createMask: function() {
			var _self = this,
				config = this.config,
				container = YUD.get( config.containerId ),
				itemList = container.getElementsByTagName( 'a' );
			
			for ( var i = 0, len = itemList.length; i < len; i++ ) {
				var item = itemList[ i ],
					itemImg = YUD.getFirstChild( item ),
					width = itemImg.width + 'px',
					height = itemImg.height + 'px',
					maskDiv = document.createElement( "div" );
					
				YUD.setStyle( maskDiv, 'position', 'absolute' );
				YUD.setStyle( maskDiv, 'top', 0 );
				YUD.setStyle( maskDiv, 'left', 0 );
				YUD.setStyle( maskDiv, 'width', width );
				YUD.setStyle( maskDiv, 'height', height );
				YUD.setStyle( maskDiv, 'backgroundColor', '#000000' );
				YUD.setStyle( maskDiv, 'opacity', 0 );
				YUD.setStyle( maskDiv, 'cursor', 'pointer' );
				item.appendChild( maskDiv );
			}
		},

		_initEvent: function() {
			var _self = this,
				config = this.config,
				container = YUD.get( config.containerId ),
				itemList = container.getElementsByTagName( 'a' );

			YUE.on( container, 'mouseover', function( e ) {
				var target = YUE.getTarget( e );

				for ( var i = 0, len = itemList.length; i < len; i++ ) {
					var item = itemList[ i ],
						maskDiv = YUD.getLastChild( item );

					if ( maskDiv !== target ) {
						//ie9下动画渐变有问题，简单处理为ie9下无动画效果
						if ( YAHOO.env.ua.ie === 9 ) {
							YUD.setStyle( maskDiv, 'opacity', 0.3 );
						} else {
							var anim = new YAHOO.util.Anim( maskDiv, {
								opacity: { to: 0.3 }
							}, 0.5, YAHOO.util.Easing.easeOut ); 
							anim.animate();
						}
					}
				}
			} );

			YUE.on( container, 'mouseout', function( e ) {
				for ( var i = 0, len = itemList.length; i < len; i++ ) {
					var item = itemList[ i ],
						maskDiv = YUD.getLastChild( item );

					//ie9下动画渐变有问题，简单处理为ie9下无动画效果
					if ( YAHOO.env.ua.ie === 9 ) {
						YUD.setStyle( maskDiv, 'opacity', 0 );
					} else {
						var anim = new YAHOO.util.Anim( maskDiv, {
							opacity: { to: 0 }
						}, 0.5, YAHOO.util.Easing.easeOut );
						anim.animate(); 
					}
				}
			} );
		}
	};

	YUE.onDOMReady( function() {
		var highLightPic = new AE.tool.highLightPic();
		highLightPic.init();
	} );
</script>

</body>
</html>